<template>
  <!-- name:自定义参数，lcy：自定义修饰符 -->
  <div v-MyDirective:name.lcy="{ background: '#ccc', width: '200px', height: '200px' }">这是一个div</div>
  <!-- <div v-bd></div> -->
</template>

<script setup lang="ts">
import { Directive, DirectiveBinding } from 'vue'

type Styles = {
  width: string
  height: string
  background: string
}
const vMyDirective: Directive = {
  mounted(el: HTMLElement, dir: DirectiveBinding<Styles>) {
    console.log('mounted')
    el.style.background = dir.value.background
    el.style.width = dir.value.width
    el.style.height = dir.value.height
  }
}
const bd: Directive = {
  mounted(el: HTMLElement) {
    el.style.border = '1px solid red'
  }
}
</script>
